<template>
    <div style="height:100%; width: 100%" class="dataInfo">
        <bar class="bar" @on-back="$router.back()">{{label}}
            <span v-if="!isSearch" slot="right" style="padding:0 10px" @click="searchBox">筛选</span>
        </bar>
        <div class="dataInfo-timePick youba-primary-grey">
            <span>{{time}}</span>
            <i class="iconfont icon-rili dataInfo-timePick-icon" @click="handleTime"></i>
        </div>
        <scroll style="height: calc(100% - 90px)">
            <div slot="done"></div>
        <div style="overflow: scroll;-webkit-overflow-scrolling : touch; height: calc(100% - 90px)">
            <grid :rows="2" class="dataInfo-grid">
                <grid-item @on-item-click="onItemClick('one')" :class="selected.one && 'dataInfo-selected'">
                    <div class="dataInfo-grid-label">充值总金额(元)</div>
                    <div class="dataInfo-grid-number">{{data.dateTotalAmount}}</div>
                </grid-item>
                <grid-item @on-item-click="onItemClick('two')" :class="selected.two && 'dataInfo-selected'">
                    <div class="dataInfo-grid-label">充值总笔数(笔)</div>
                    <div class="dataInfo-grid-number">{{data.dateTotalCount}}</div>
                </grid-item>
            </grid>
            <div v-show="selected.one">
                <mu-progress :innerWidth="item.width" :left="item.orderDate" :right="item.amount"
                             v-for="(item, key) in amounts" :key="key">
                </mu-progress>
            </div>
            <div v-show="selected.two">
                <mu-progress :innerWidth="item.width" :left="item.orderDate" :right="item.count"
                             v-for="(item, key) in counts" :key="key">
                </mu-progress>
            </div>
        </div>
        </scroll>
    </div>
</template>

<script>
    //充值数据记录
    import scroll from '../../components/scroll.vue'
    import {
        Bar,
        Progress
    } from 'muka-ui'
    import {
        Grid,
        GridItem,
        Popup,
        DatetimePlugin,
        TabItem,
        Group,
        Cell,
        CellBox,
        Tab
    } from 'vux'
    import Vue from 'vue'

    Vue.use(DatetimePlugin)
    export default {
        name: 'dataInfo',
        components: {
            Bar,
            'mu-progress': Progress,
            Grid,
            GridItem,
            Popup,
            TabItem,
            Group,
            Cell,
            CellBox,
            Tab,
            scroll
        },
        created: function () {
            Date.prototype.format = function (partten) {
                if (partten == null || partten === '') {
                    partten = 'y-m-d'
                }
                let y = this.getFullYear()
                let m = this.getMonth() + 1
                let d = this.getDate()
                let r = partten.replace(/y+/gi, y)
                r = r.replace(/m+/gi, (m < 10 ? '0' : '') + m)
                r = r.replace(/d+/gi, (d < 10 ? '0' : '') + d)
                return r
            }
            this.time = (new Date()).format('y-m')

            if(this.$route.query.cardId)
            {
                this.cardId = this.$route.query.cardId
                this.label = this.cardId
                this.isSearch = true
            }

            if(this.$route.query.tankerId)
            {
                this.tankerId = this.$route.query.tankerId
                this.label = this.tankerId
                this.isSearch = true
            }
            this.getData()
        },
        data: function () {
            return {
                isSearch: false,

                cardId: null,
                showTime: false,
                data: {},
                tTime: '',
                amounts: [],
                counts: [],
                selected: {
                    'one': true,
                    'two': false,
                    'three': false
                },
                detail: [],
                icDetail: [],
                searchText: '',
                select: 1,
                num: 1,
                time: '',
                buy: false,
                buyI: false,
                label: '充值数据',
                tankerDetail: [],
                showSearch: false,
            }
        },
        methods: {
            getData: function () {
                this.$ajax(
                    'data/cardChargePlus',
                    {
                        month: this.time,
                        cardId:this.cardId
                    },
                    (content) => {
                        let maxAmount = Math.max.apply(this, content.statistics.map(item => item.totalAmount))
                        let maxCount = Math.max.apply(this, content.statistics.map(item => item.totalCount))
                        this.data = content
                        this.amounts = content.statistics.map(item => {
                            return {
                                orderDate: item.orderDate,
                                amount: item.totalAmount,
                                width: Number(item.totalAmount) ? 'calc(140px + (100% - 140px) * ' + item.totalAmount + ' / ' + maxAmount + ')'
                                    : '140px'
                            }
                        })

                        this.counts = content.statistics.map(item => {
                            return {
                                orderDate: item.orderDate,
                                count: item.totalCount,
                                width: Number(item.totalCount) ? 'calc(140px + (100% - 140px) * ' + item.totalCount + ' / ' + maxCount + ')'
                                    : '140px'
                            }
                        })
                    },true)
            },
            onItemClick: function (key) {
                for (let i in this.selected) {
                    if (i === key) this.selected[i] = true
                    else this.selected[i] = false
                }
            },
            searchBox: function () {
                this.$router.push('/rechargeDataSearch')
            },

            //选择日期查询
            handleTime: function () {
                this.$vux.datetime.show({
                    cancelText: '取消',
                    confirmText: '确定',
                    format: 'YYYY-MM',
                    value: this.time,
                    onConfirm: (val) => {
                        this.time = val
                        this.getData();
                    }
                })
            }
        }
    }

</script>

<style lang="less">
    .dataInfo {
        .detail-block-box {
            height: 40px;
        }
        .weui-cells:first-child {
            margin-top: 0px;
        }
        .detail-cell-box {
            position: absolute;
            width: 92%;
            top: 10px;
        }
        .weui-cell {
            line-height: 20px;
        }
        .detail-box-name {
            line-height: 40px;
            height: 40px;
            color: white;
            width: 40px;
            border-radius: 50%;
            text-align: center;
        }
    }

</style>
